<template>
  <div class="drawerStyle">
    <BasicDrawer
      wrapClassName="drawerStyle-tc"
      :loading="loading"
      v-bind="$attrs"
      @register="registerDrawer"
      destroyOnClose
      :title="'人员详情'"
      width="41rem"
    >
      <div class="avatar-container" v-if="!loading && userInfoData.length">
        <div v-for="item in userInfoData" :key="item.id" class="box-avatar">
          <img class="img1" :src="item.avatar || defaultAvatar" />
          <div class="box-avatar-item">
            <div style="display: flex">
              <span>{{ item.builderName }}</span>
            </div>
            <div>{{ item.leader ? '施工班组长' : '施工队员' }}</div>
          </div>

          <img
            v-if="userInfoData[0].builderType === 1"
            style="margin: -25px 0 0 20px; width: 72px; height: 28px"
            class="img-icon"
            src="./images/icon.svg"
            alt=""
          />
          <!-- <div style="height: 120px; width: 100px; background-image: url(./images/icon.svg)"
            >123</div
          > -->
          <img
            v-if="userInfoData[0].builderType === 1"
            style="width: 72px; height: 28px"
            class="img-icon2"
            src="./images/icon3.svg"
            alt=""
          />
          <img
            v-if="userInfoData[0].builderType === 0"
            style="width: 72px; height: 28px"
            class="img-icon3"
            src="./images/icon2.svg"
            alt=""
          />
          <span v-if="userInfoData[0].builderType === 1" class="avatar-container-user"
            >特种人员</span
          >
          <!-- <span class="avatar-container-user2">注：另外两种人员</span> -->
          <span class="avatar-container-user3" v-if="userInfoData[0].builderType === 1"
            >技术人员</span
          >
          <span class="avatar-container-user4" v-if="userInfoData[0].builderType === 0"
            >普通人员</span
          >
        </div>
        <div class="box-container">
          <span class="span1">性别:</span>
          <span class="span2">{{ userInfoData[0].sex ? '男' : '女' }}</span>
        </div>
        <div class="box-container">
          <span class="span1">年龄：</span>
          <span class="span2">{{ userInfoData[0].age }}</span>
        </div>
        <div class="box-container">
          <span class="span1">联系方式：</span>
          <span class="span2">{{ userInfoData[0].mobile }}</span>
        </div>
        <div class="box-container">
          <span class="span1">技能证书：</span>
          <span class="span2">{{ userInfoData[0].certificateName }}</span>
        </div>
        <div class="box-container">
          <span class="span1">人员类型：</span>
          <span class="span2">{{ userInfoData[0].constructionTeamName }}</span>
        </div>
      </div>
      <Empty v-else />
    </BasicDrawer>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, watch, PropType } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { Empty } from 'ant-design-vue';

  import defaultAvatar from '/@/assets/images/default-avatar.png';
  interface UserData {
    builderType: number;
    id: string;
    builderName: string;
    constructionTeamId: string;
    avatar: string;
    mobile: string;
    sex: number;
    age: number;
    leader: number;
    certificateName: string;
    constructionTeamName: string;
  }
  export default defineComponent({
    name: 'StepInfoMenuDrawer',
    components: {
      BasicDrawer,
      Empty,
    },

    props: {
      userSubData: {
        type: Array as PropType<UserData[]>,
        default: () => [],
      },
    },
    emits: ['success', 'register'],
    setup(props) {
      const loading = ref(true);
      setTimeout(() => {
        loading.value = false;
      }, 1500);
      const isUpdate = ref(false);
      const userInfoData = ref<UserData[]>([]);
      watch(
        () => props.userSubData,
        (newVal) => {
          console.log(newVal);

          if (newVal && newVal.length) {
            userInfoData.value = newVal;
            loading.value = false;
          }
        },
      );

      const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
        setDrawerProps({ confirmLoading: false });
        isUpdate.value = !!data?.isUpdate;
      });

      return { loading, isUpdate, userInfoData, registerDrawer, defaultAvatar };
    },
  });
</script>
<style lang="less" scoped>
  .avatar-container {
    margin: 8px 4px 0px 12px;
    position: relative;

    .avatar-container-user {
      position: absolute;
      left: 150px;
      font-weight: 400 !important;
      top: 0;
      font-size: 14px !important;
      color: #1153d8 !important;
    }

    .avatar-container-user2 {
      position: absolute;
      right: 78px;
      font-weight: 400 !important;
      top: 24px;
      font-size: 14px !important;
      color: #ff522b !important;
    }

    .avatar-container-user3 {
      position: absolute;
      right: 135px;
      font-weight: 400 !important;
      top: 62px;
      font-size: 14px !important;
      color: #4db803 !important;
    }

    .avatar-container-user4 {
      position: absolute;
      right: 57px;
      font-weight: 400 !important;
      top: 62px;
      font-size: 14px !important;
      color: #999999 !important;
    }

    .box-container {
      margin-left: 12px;
      margin-top: 12px;
      display: flex;
      align-items: center;

      .span1 {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        width: 108px;
        height: 30px;
      }

      .span2 {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 500;
        color: #333333;
        width: 100%;
        height: 30px;
      }
    }

    .box-avatar {
      display: flex;
      align-items: center;
      justify-content: left;
      width: 100%;

      .box-avatar-item {
        display: inline-block;
        margin-left: 5px;
      }

      .img-icon2 {
        position: absolute;
        top: 60px;
        right: 129px;
      }

      .img-icon3 {
        position: absolute;
        top: 60px;
        right: 50px;
      }

      & > .img1 {
        // cursor: pointer;
        display: inline-block;
        width: 48px;
        height: 48px;
        opacity: 1;
        // margin: auto;
        border-radius: 50%;
      }

      span {
        display: block;
        font-size: 16px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
      }

      div {
        font-size: 14px;
        color: rgba(102, 102, 102, 1);
      }
    }
  }
</style>
<style lang="less"></style>
